طراحی وب سایت

اگر به چند دهه قبل بازگرديم تقريبا هيچ کس نميدانست که اينترنت و کدنويسي وب چيست ولي امروزه به يکي از مهمترين بخش هاي زندگي بشر تبديل شده است.

اينترنت ديگر تنها مکاني براي يافتن يک رستوران خوب يا لوله کش نيست، بلکه به فضايي گسترده و مناسب جهت کار و کسب درآمد تبديل گشته است. با طراحي و کدنويسي يک سايت زيبا و ارائه مطالب بروز و مفيد ميتوانيد به سرعت افراد را به سايت خود طراحی جذب کرده و درآمد مناسبي از طريق تبليغات کسب کنيد.

با اين حال شرايط هميشه به همين شکل نبوده و در ابتداي مسير محدوديت هاي فراواني در کدنويسي وب و ارائه اطلاعات وجود داشت. در ابتدا برخلاف امروز تنها زبان کدنويسي  HTML بوده و اولين سايت در سال ???? راه اندازي شد. ار آنروز تا به حال تغييرات زيادي را در کدنويسي به زبان کدنويسي HTML مشاهده کرديم که به بررسي آن خواهيم پرداخت.

اولين نسل از زبان HTML

در دهه ?? ميلادي و بهمراه افزايش ارتباط کاربران با اينترنت، امکان خواندن مطالب در فضاي اينترنت با استفاده از کدنويسي HTML مهيا شد. در آن زمان صفحات وب از متن هايي محدود و در يک ستون تشکيل ميشدند و مودم هاي ديال آپ سرعت بسيار پاييني داشتند به همين دليل طراحان وب هرگز به فکر استفاده از تصوير و فيلم در صفحات سايت نبودند.

Mosaic نام اولين مرورگر براي ارتباط و درک صفحات وب بود که بر روي سيستم عامل Unix راه اندازي شد. براي غلبه بر اين مشکلات و محدوديت ها تلاش هاي فراواني صورت گرفت تا دنياي وب به شکل امروزي آن رسيده است.

نسل دو زبان کدنويسي HTML

مدت زماني طول کشيد تا طراحان وب خود را با تکنولوژي هاي رو به پيشرفت همگام و هماهنگ کنند. به همين دليل با ايجاد هماهنگي و با ايده فعال و زيبا کردن صفحات وب به ناگهان صفحات زيادي با ظاهر هاي بهم ريخته و شلوغ که تنها به استفاده از تصاوير و رنگ هاي مختلف توجه کرده بودند ايجاد شد. دستورات کدنويسي HTML به سرعت افزايش يافت تا جاييکه براي ايجاد يک هماهنگي عمومي نسخه دوم يعني HTML2 رونمايي شد.

پيچيدگي در کدنويسي وب از همين مرحله آغاز شد و بزرگترين مانع سرعت پايين اينترنت در ديافت عکس و گرافيک براي کاربران عمومي بود.

کنسرسيوم جهاني وب

کدنويسي HTML

کنسرسيوم جهاني وب ناظر مستقيم بر استانداردهاي کدنويسي HTML

با گسترده تر شدن امکانات و کاربران اينترنت، کنسرسيوم جهاني وب يا همان W3C که با WWW شناخته ميشود با يک ايده مشخص تشکيل شد. هدف اين کنسرسيوم جلوگيري از انحصار اينترنت در چنگال يک يا چند شرکت بزرگ و استفاده از آن در جهان بوده است. به اين ترتيب سياست هاي کلي و زبان کدنويسي در همه جه يکسان بوده و مرورگرهاي اينترنت براساس همين پروتکل ها عمل خواهند کرد، در نتيجه تفاوت آنها تنها در ظاهر، سرعت و امکاناتشان خواهد بود. همين امر موجب پيشرفت سريعتر و هدفمند اينترنت شد.

W3C با مشخص کردن استاندارهاي کدنويسي  طراحی   براي طراحان وب و نظارت بر رعايت آن يک سامان دهي و هماهنگي جهاني ايجاد کرده و هرگونه تغيير و بروزرساني در آن به سادگي در اختيار همگان خواهد بود.

نسل سوم زبان HTML

نسل سوم يا همان کدنويسي HTML3 با ورود انيميشن، فلش، افکت هاي صوتي و تصاوير سه بعدي به صفحات وب همراه بوده و در همين فاصله شرکت مايکروسافت مرورگر خود را با نام اينترنت اکسپلورر به جهان معرفي کرد.

نشل سوم تجربه بهتري براي کاربران اينترنتي بهمراه داشت زيرا طراحان و متخصصان کدنويسي وب توجه بيشتري به نظم در صفحات و نحوه ارائه مطالب نشان ميدادند. در اين مقطع قدرت و پتانسيل بالاي اينترنت بر همگان آشکار شد.

 

 

 آيا اينترنت همان وب است؟ 

اکثر کاربران فکر مي‌کنند که وب همان اينترنت است اما اينترنت در سال ???? وقتي که آرپانت که همان پدر اينترنت ناميده مي‌شود شروع به استفاده از پروتکل TCP/IP کرد شکل گرفت. وب توسط تيم برنرز لي انگليسي در سال ???? ساخته شده. شبکه جهاني وب از سرورها که صفحات را دربر دارند و مرورگرهاي بسياري همانند فايرفاکس ، اينترنت اکسپلورر ، سافاري و… ساخته شده است. درواقع اينترنت مجموعه‌اي از فناوري‌ست که موجوديت وب را رقم زده است. اگر اينترنت نبود وب هم نبود و اگر وب نبود اينترنت همچنان در اثر هجر باقي مي‌ماند. بايد به اين نکته توجه داشت که بسياري از برنامه‌هاي تحت شبکه بدون نياز به وب کار مي‌کنند مانند ايميل، FTP ، IRC يا چت مبتني بر اينترنت ، نرم‌افزارهاي پيام رسان ، تل‌نت، تورنت...

اينترنت يک دا?ن تو در تو است از تلفن‏ها، خطوط کابلى، ماهواره‏ها، سيم‏هاى شبکه و کامپيوترهاى به هم پيوسته که در سرتاسر جهان پراکنده شده‏اند. توصيه مي کنم مقاله اينترنت چيست را در همين سايت ايران کالا مطالعه کنيد. وب به نامى گفته مي شود که به هر چيز در اينترنت تعلق گرفته است. ما ميتوانيم با استفاده از Uniform Resource Locator يا URL به آن چيز دسترسى داشته باشيم. اين روش آدرس‏دهى (مثل  در دهه 60 اينترنت را تبديل به شاهراه اطلاعاتى کرد. به خصوص اينكه باعث حذف اعلان‏ها و فرمان‏هايى شد که سابقاً کاربران مجبور بودند تا براى رسيدن به اطلاعات تايپ کنند. بخش اعظمى از محتوياتى که شما از طريق URL به دست مي آوريد، فايلهايى هستند که با يک کد خاص موسوم به HyperText Makup Language يا به اختصار HTML نوشته شده‏اند. ما فايلهاى HTML را به عنوان صفحات وب ميشناسيم.

به خاطر هوشمندى كه در مرورگرها و اغلب وب سرورها قرار داده شده است، معمو?ً نيازى به وارد کردن ".www" قبل از يک آدرس وب وجود ندارد. وقتى يک URL را وارد ميکنيد، مرورگر يک درخواست به يک سرور براى پيداکردن سايت ميفرستد. سرور اغلب سايت را حتى بدون پيشوند تشخيص مي دهد. اما اگر نتوانست، .

يان ياکوبس از کنسرسيوم وب جهان گستر واقع در MIT مى گويد « در جهان ايده آل، URL ها نه ديده مي شوند و نه شنيده ». در حال حاضر کاربران، سايتها را به وسيله موتورهاى جستجويى چون Google پيدا مي کنند و براى رسيدن به هر چيزى روى لينک‏ها کليک مي کنند. کنسرسيوم در جستجوى راهبردهاى جهانى براى تغيير معمارى وب است تا گردش در آن را آسان تر کند؛ به خصوص براى افرادى که دچار نوعى معلوليت جسمى نيز هستند .

 

 

 

کدام يک از کدهاي زير بر روي عناصر تاثير ميگذارند؟

 

وقتي به يک عنصر يکسري خصوصيات نسبت مي دهيم، و در يک استايل دهي گروهي يا در جاي ديگري يکسري خصوصيات ديگر براي آن مي نويسيم، از بين خصوصيات يکسان تمامي آنها به ارث برده ميشود و از بين ساير خصوصيات آن ويژگي هايي به ارث مي روند که نسبت به ساير دستورات ديرتر و يا به عبارتي بعد تر نوشته شده اند و در صفحه استايل دهي پايين تر قرار گرفته اند. با هم به بررسي مثال زير مي پردازيم :

  

h2 

{

color: blue;

 font-size: medium;

 font-weight: normal;

} 

h1, h2, h3 

{

 font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;

 background-color: navy;

color: white;

}

 

در دستورات ابتدايي رنگ نسبت داده شده به تگ h2 آبي است، اما در استايل دهي گروهي رنگ نسبت داده شده به آن سفيد است، به همين دليل رنگ فونت انتخابي براي آن سفيد خواهد بود. مهم نيست که در دستورات قبلي  100 بار رنگ آبي به h2 نسبت داده شود پرا که آخرين دستور  css رنگ سفيد را به اين تگ نسبت مي دهد. 

 

استايل دهي به لينک ها:

 

لينک ها در سراسر دنياي وب وجود دارند، اگر به لينک هاي اوليه با استايل پيش فرض نگاهي بيندازيم مي بينيم که لينک ها داراي يک خط در زير نوشته لينک (underline)  هستند. به صورت پيش فرض مرورگرها از رنگ هاي زير براي لينک ها استفاده مي کنند:

آبي :    لينکي که مشاهده نشده باشد.

بنفش :  لينکي که شما آن را قبلا مشاهده کرده ايد.

قرمز:   لينکي که فعال است و شما در حال کليک کردن بر روي آن هستيد.

در بيشتر مواقع استايل دهي به لينک ها ممکن است به شکل زير باشد:

 

A

 {

 font-weight: bold;

 color: black;

}

 

با اين دستور به جاي اينکه لينک هاي آبي رنگ با سايز فونت نرمال داشته باشيم، لينک هاي شما به رنگ آبي و ضخيم خواهد بود. 

 

 

 

همانطور که قبلا اشاره کرديم تا کنون يک نوع حالت براي لينک ها معرفي کرديم، لينک هاي مشاهده شده، لينک هاي فعال و لينک هايي که هنوز بر روي آنها کليک نشده است، اما نوع چهارمي وجود دارد که hover ناميده مي شود، اين حالت براي وقتي است که نشانه گر موس بر روي لينک مي آيد که با استايل دهي در css نيز ميتوان خصوصيات اين لينک را نيز تغيير داد.

در اينجا به برخي از استايل هايي که مي توان به لينک ها داد نگاهي مي اندازيم:

 

a {

 font-weight: bold;

 }

 a:link {

 color: black;

}

a:visited {

 color: gray;

}

a:hover {

 text-decoration: none;

 color: white;

 background-color: navy;

}

a:active {

 color: aqua;

 background-color: navy;

}

 

 

 

  عکس بالا کليه حالت هاي مختلف لينک ها را نشان مي دهد و حالت hover آن لينک تماس با ما  (contact us) است. تمامي رنگ هاي پيش زمينه و ساير رنگ هاي ديگر را مي توانيد با css  ايجاد کنيد و مي توانيد افکت هاي بسيار جذابي مانند آن چيزي که در بخش فوتر سايت وب اسکالا مشاهده نماييد ايجاد کنيد.

 

پاک کردن پيشينه مرورگر:

 

مرورگرها به صورت پيش فرض مقداري از پيشينه صفحات وب سايت را در خود ذخيره مي کنند و از اين اطلاعات استفاده مي کنند که بدانند آيا لينکي بازديد شده است يا نه، اما اين کار براي زمانيکه طراح وب سايت در حال تست کردن صفحه سايتي است کمي مشکل ساز مي شود به خصوص وقتي که طراح مي خواهد لينکي که بازديد نشده است را استايل بدهد، اما چون صفحه سايت را چندين بار refresh  کرده مرورگر وي به اصطلاح cache  کرده و به همين دليل لينک هاي بازديد نشده را بازديد شده مي پندارد که به همين دليل مي بايست cache يا اطلاعات ذخيده شده را پاک کرد. براي اين منظور به اين صورت عمل مي کنيم:

در مرورگر اينترنت اکسپلورر : تب  tools راانتخاب کرده، inteet option  را کليک مي کنيد، زير browser history دکمه delete  را بزنيد، در پنجره باز شده check box مربوط به history  را فعال کنيد، انتخاب ساير گرينه ها با توجه به نظر خودتان مي تواند صورت گيرد. در نهايت دکمه delete  را زده و پنجره inteet option را ok ميکنيم تا بسته شود و cache مرورگرمان پاک شود.

 

 

 

ساير مرورگرها نيز روشي مشابه دارند که آدرس دسترسي به history  آنها نيز به صورت زير است:

 

Tools > Options يا   Preferences > Privacy

 

 

کلاس هاي انتخابگر  :

 

تا اينجا ياد گرفتيم که چگونه در يک فايل CSS خصوصيات مختلفي براي تگها بنويسيم و آموختيم که ميتوان خصوصيات يک کلاس را براي تگهاي مختلفي اعمال کرد يعني ميتوان کلاس را چندين بار استفاده کرد. به عنوان مثال بياييد کلاس زير را دريک پاراگراف اعمال کنيم :

 

.fun {

color: #339

 

به اين ترتيب 3 خصوصيت براي پاراگرافمان تعريف کرده ايم،که خصوصيت سوم letter-spacing  به معناي اينست که فاصله بين کلمات موجود درمتن 0.05em باشد. (اگرارتفاع حرف M رابرابربا em1 درنظربگيريد 5% اين مقدار برابر با 0.05em خواهد بود).

حال براي اين که اين خصوصيات که در css نوشتيم برروي پاراگراف مدنظر اعمال شود کافيست که نام کلاس موجود در css رابه تگ مورد نظ مان درصفحه html نسبت دهيم:

 

<p class="fun">

A man walks into a bar; you would've thought he'd see it coming!

</p>

 

حال در نظربگيريد تگ  <blockquote>درون صفحه html تان وجود دارد و درون اين تگ ميخواهيد يک پاراگراف قرار دهيد که کلاس fun داشته باشد ، همانند کد زير:

 

<blockquote>

<p class="fun">

    Happiness is a dip in the ocean followed by a

    int or two of Old Speckled Hen. You can quote me on that!"

</p>

</blockquote>

 

به نظر شما اگر بخواهيد چند پاراگراف درون اين تگ قراردهيد چه کارميتوان کرد؟ ميتوان راه حل زير را اعمال کرد:

 

<blockquote>

<p class="fun">"Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that! </p>

<p class="fun">"Join us for a weekend away at some of our favorite dive spots and you'll soon be making new friends. </p>

<p class="fun">"Anyway, about time I got on with some <em>proper</em> work!" </p>

</blockquote>

 

اما همانطور که مي بينيد تکرار نام کلاس در تگها ي بالا زياد صورت گرفته ، پس به جاي استفاده از روش بالا ميتوان روش بهتري را به کار برد   :u can quote me on that! </p>

<p>"Join us for a weekend away at some of our favorite dive spots and you'll soon be making new friends. </p>

<p>"Anyway, about time I got on with some <em>proper</em> work!" </p>

</blockquote>

 

ID & CLASS

 

ياد گرفتيد که چگونه ميتوان از ID  و کلاس براي تگهاي موجود در HTML طراحی وب سایت  خود استفاده نماييد ، به عنوان مثال براي کلاس از نماد "." قبل از نام کلاس در نظر گرفته شده در فايل سي اس اس استفاده مي کنيم و براي ID از نماد "#" . 

نکته از مترجم : دقت نماييد براي استايل دهي هم از کلاس استفاه ميشود و هم از ID. اما تفاوت هايي هم در استفاده دارد وآن اينکه از ID  براي استايل دهي و مشخص کردن عناصر اصلي صفحه مانند هدر  فوتر و منو و غيره استفاده ميکنيم و يا براي استفاده در موارد برنامه نويسي .

تنها نکته در اين باره اين است که در يک صفحه HTML از نام يک ID  فقط مي شود يکبار استفاده نمود اما از نام يک کلاس مي توان به هر تعداد استفاده کرد.

 

در نظر بگيريد براي چند تگ درون صفحه تان از يک کلاس يکسان استفاده کرده ايد، مثلا:

 

.fun {

font-family: Georgia, Times, serif;

color: #339999;

letter-spacing: 0.05em;

}

 

اما براي يکي از تگ ها علاوه بر خصوصيات فوق يک يا چند خصيصه ديگر نيز اضافه کنيد، به اين روش اين کار را انجام مي دهيم:

 

blockquote.fun {

font-style: italic;

 

 

براي روشن تر شدن اين موضوع مثال ديگري مي زنم:

فرض کنيد مي خواهيم تمامي متون قرار گرفته درون تگ  p صفحه مان به رنگ آبي نفتي درآيند بنابراين کافيست که در CSS بنويسيم : 

 

p {

color: navy;

}

 

اما حالا اگر بخواهيم يکي از متون قرار گرفته درون تگ p مان به رنگ ديگري درآيد کافيست ، به اين تگ p يه کلاس بدهيم و سپس به آن کلاس رنگ مورد نظرمان را نسبت دهيم:

 

.p.gre {

color: green;

}

 

استايل دهي قسمتي از متن با استفاده از span  :

 

فرض کنيد که چنين متني داريد:

 

<p>Bubble Underis a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the weather is good and the bacon rolls are flowing. We arrange weekends away as small groups to cut the costs ofaccommodation and travel and to ensure that everyone gets a trustworthy dive buddy.</p>

 

و مي خواهيد دو کلمه اول اين متن يعني Bubble Underis  به صورت bold  (پر رنگ) نمايش داده شود. براي اين کار براي اين کلمات يک تگ span به کار مي بريم و سپس به اين span استايل ديگري را اعمال مي کنيم و آن را آبي رنگ مي کنيم:

 

<p><span class=" blue ">Bubble Under</span> is a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the weather is good and the bacon rolls are flowing. We arrange weekends away as small groups to cut the costs ofaccommodation and travel and to ensure that everyone gets a trustworthy dive buddy.</p>

.blue

{

Color: # a3c2fa;

}

 

 

 

 

 

استايل دهي عناصر با استفاده از css 

 

 طي سالهاي گذشته توسعه دهندگان وب سايت با استفاده  از css تنها مي توانستند به متون موجود در سايت استايل بدهند و در پاره اي از مواقع رنگي را به متني اختصاص مي دادند، اين تنها کاري بود که مي شد با استفاده ازcss انجام داد چون در آن زمان مرورگر ها بسيار ضعيف بود و نمي توانستند خصوصيات بيشتري از css  را پشتيباني کنند. اما با گذشت زمان اين امر ميسر شد و مرورگر ها پيشرفت کردند.

 

تغيير پس زمينه و کناره هاي اشکال

موقعيت عناصر در هر جاي صفحه وب سايت

 

قبل از شروع کار، ابتدا براي ايجاد تغيير در ظاهر و اندازه عناصر در وب سايت مي بايست با مفهوم block-level elements  و inline elements آشنا شويد.

 

block-level elements  و inline elements

 

block-level elements:  به عناصر يا تگ هايي مي گوييم که توسط آن مي توان کل سطر يا فضايي که آن عنصر در اختيار خود دارد را  مسدود يا به اصطلاح block کرد، هر عنصر block  مي تواند درون خود عنصر و يا عناصر inline و يا block  را جاي دهد.

 

inline elements : به عناصر يا تگ هايي مي گويند که آنها تنها مي توانند به اندازه متني که درون آن جاي گرفته قسمتي از سطر را اشغال نمايند، اين عناصر خطي يا به اصطلاح inline ناميده مي شوند، توجه داشته باشيد که درون تگ هاي inline تنها عنصر Inline جاي ميگيرد.

نحوه تشخيص عناصر  inline  بدين صورت است که اگر عنصري دوم در کنار عنصر اول در امتداد يک خط قرار گيرند عنصر اول قطعا inline است، اما اگر عنصر اول  block باشد عنصر دوم در بالا يا پايين عنصر اول قرار خواهد گرفت و نه در امتداد عنصر اول.

 

در اينجا چند عنصر block را معرفي مي کنيم:

 

تگ هاي h1, h2,...و h6

P

div

Blockquote

Ul  و  ol

Form

 

وقتي که شما يک پاراگراف ايجاد مي کنيد، نيازي نيست که بعد از پايان پاراگراف اول با استفاده از <br /> به خط بعد برويد تنها کافيست يک تگ<p> را باز کرده متن خود را بنويسيد و سپس آن تگ را ببنديد.</p>

بذين ترتيب چون تگ p بلاک است خود به خود متني که در تگ دوم P  قرار مي گيرد از ابتداي سطر بعد شروع مي شود.

 

 

و خروجي آن را بدين صورت خواهيم داشت:

 

 

نرم افزار Notepad را مي توانيد از طريق منوي استارت در قسمت Accessories پيدا کنيد يا از طريق فرمان Run با تايپ notepad در کادر Open و فشار دادن دکمه Enter.

شما به يک مرورگر وب به انتخاب خود نياز داريد. مي توانيد از Microsoft Inteet Explorer استفاده کنيد که با ويندوز نصب مي شود يا از Opera, Mozilla Firefox و نرم افزارهاي مشابه که اغلب به صورت رايگان براي دانلود در اينترنت وجود دارند.

بهتر است صفحاتي را که مي نويسيد با چند مرورگر آزمايش کنيد. زيرا در HTML قسمتهايي وجود دارد که مختص به يک مرورگر خاص است و با ساير مرورگرها کار نمي کند.

شما به جايي براي ذخيره کردن متن خود داريد که مي تواند جايي روي هارد ديسک شما، يک فلاپي ديسک يا يک سرور باشد. البته شما براي استفاده از HTML نياز نداريد حتماً به اينترنت متصل باشيد، شما مي توانيد با استفاده از يک مرورگر وب در کامپيوتر خود از HTML استفاده کنيد.

براي ذخيره کردن فايلي که با Notepad نوشته ايد کافي است از منوي File گزينه Save As را انتخاب کرده و مسيري را براي ذخيره فايل انتخاب کنيد و در کادر File Name در پايين پنجره Save As نام فايل را با پسوند html بنويسيد. در آخر هم دکمه Save را کليک کنيد.